<template>
	<view class="current pt-re">
		<!-- <image class="top-img pt-ab" src="/static/icon/my/ball.png" mode=""></image> -->
		<!-- <view class="arcbottom">
		</view> -->
		<view class="userInfo f-row ai-c box-border">
			<block v-if="userInfo">
				<image :src="userInfo.avatar" class="avatar" mode=""></image>
				<view class="iName-phone f-column jc-sb box-border">
					<view class="iName">
						{{userInfo.nickname}}
					</view>
					<view class="phone" @click="jumpPage">
						<!-- {{userInfo.mobile}} -->
						个人信息<u-icon name="edit-pen-fill"  customStyle="display:inline;font-size:28rpx;margin-left:10rpx;" color="rgba(255, 255, 255, 0.8);"></u-icon>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="f-row ai-c">
					<view class="empty avatar f-row ai-c jc-c">
						<u-icon size="34" name="account-fill" color="#c9c9c9"></u-icon>
					</view>
					<!-- 	<view class="iName-phone f-row ai-c jc-c login" @tap="login()">
						立即登录
					</view> -->
					<button class="iName-phone f-row ai-c jc-c login" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber" style="color: #fff;">立即登录</button>
					<!-- 	<button class="iName-phone f-row ai-c jc-c login" 
							@click="getInfo">登录</button> -->
				</view>
			</block>
		</view>
		<u-toast ref="uToast"></u-toast>
		<!-- showPop v-if="showPop"--> 
		<view class="" style="margin-bottom: 80px;">
			<wxLoginPopup  ref="login" :isVisible="showPop" @update="close" :openid="openid" />
		</view>

	</view>
</template>

<script>
	// let WebIM = require("@/utils/WebIM")["default"];
	// let disp = require("../../utils/broadcast");
	import wxLoginPopup from '@/pages/my/wx-login-popup.vue';
	import {
		wxLogin,
		getWxPhone,
		upRegister,
		getUser,
		empower
	} from '@/request/api.js'
	import {
		log
	} from 'util';
	export default {
		props: {
			userInfo: {
				type: Object,
				default: null
			},
			userData: null
		},
		components: {
			wxLoginPopup
		},
		data() {
			return {
				userCode: null,
				show: false,
				showPop: false,
				mobile: '',
				openid: '',
				// customStyle: {
				// 	marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
				// 	color: 'red'
				// }
			}
		},	
		onLoad(){
		},		
		methods: {
			empower(){
				wx.login({
					provider: 'weixin',
					success: loginRes => {
						empower({
							code:loginRes.code
						}).then(res => {
							console.log(res,'ssssssss')
							this.openid = res.data.openid
							this.$refs.login.job_id = res.data.job_id
							this.$refs.login.realname = res.data.name
							if(res.data.mobile != ''){
								this.$refs.login.mobile = res.data.mobile
							}
						})
					}
				})
				
			},
			refuse() {
				uni.clearStorageSync('token')
				this.show = false
			},
			open() {
				// console.log('open');
			},
			close() {
				this.showPop = false
				// console.log('close');
			},
			/* 个人信息 */
			jumpPage() {
				uni.navigateTo({
					url: '/my_pages/myInfo/myInfo?type=edit'
				})
			},
			/* 登录 */
			getPhoneNumber(e) {
				getWxPhone({
					code: e.detail.code
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						// this.mobile = res.data.mobile
						this.$refs.login.mobile = res.data.mobile							
						this.showPop = true
						this.empower()
					}
					/* this.getWxUserinfo() */
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
	}

	.custom-style {
		color: #ff0000;
		width: 400rpx;
	}

	button {
		background-color: transparent;
		color: #fff;
	}

	.RealName {
		display: flex;
		background: #fff;
		z-index: 1;
		margin: 160rpx 30rpx;
		align-items: center;
		border-radius: 15px;

		.left {
			padding: 15rpx;
			flex: 1;
		}

		.authe {
			margin-right: 15rpx;
		}

		.tip {
			color: #979797;
			margin-top: 8rpx;
			margin-bottom: 8rpx;
			font-size: 26rpx;
		}
	}

	.empty {
		background-color: #f1f1f1;
	}

	.login {
		font-size: 42upx;
	}

	.iName-phone {
		padding: 15upx 20upx;
		height: 140upx;
		font-size: 28rpx;
		color: #09173A;
	}

	.iName {
		color: #FFFFFF;
		padding: 5rpx 20rpx;
		font-size: 32rpx;
	}

	.userInfo {
		position: absolute;
		top: 150upx;
		color: #fff;
		width: 100%;
		padding: 0 30upx;
	}

	.icon-setup {
		width: 30upx;
		height: 30upx;
		position: absolute;
		right: 30upx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 999;
	}

	.avatar {
		width: 140upx;
		height: 140upx;
		border-radius: 50%;
	}

	.phone {
		width: 134rpx;
		margin-left: 20rpx;
		display: flex;
		color: rgba(255, 255, 255, 0.8);;
		background: rgba(186, 186, 186, 0.1);
		padding: 5rpx 20rpx;
		border-radius: 28rpx;
		font-size: 24rpx;
		padding: 5rpx 20rpx;
	}

	.top-img {
		right: 0;
		top: 0;
		width: 360upx;
		height: 360upx;
		z-index: 9;
	}

	.current {
		background: url(../../static/my/bg2.png);
		// background: url(../../static/selectBot.png);
		background-size: 100% 100%;
		height: 420rpx;
		background-repeat: no-repeat;
		padding: 5rpx 20rpx;
	}

	.arcbottom {
		// width: 200%;
		// position: relative;
		// height: 300upx;
		// background-color: $common-color;
		// border-bottom-left-radius: 140%;
		// border-bottom-right-radius: 140%;
		// left: 50%;
		// transform: translateX(-50%);
	}
</style>
